<template>
  <div class="page-container">
    <el-card>
      <el-form
        :model="form"
        label-width="80px"
      >
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-change="handleAvatarChange"
          >
            <img
              v-if="form.avatar"
              :src="form.avatar"
              class="avatar"
            >
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
            />
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="修改密码">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="新密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="save"
          >
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const form = ref({
  avatar: '',
  username: 'admin',
  password: ''
})
function handleAvatarChange(file: any) {
  const reader = new FileReader()
  reader.onload = (e: any) => {
    form.value.avatar = e.target.result
  }
  reader.readAsDataURL(file.raw)
}
function save() {
  // 保存逻辑
}
</script>

<script lang="ts">
export default { name: 'ProfilePage' }
</script>

<style scoped>
.page-container { padding: 24px; }
.avatar-uploader { display: flex; align-items: center; }
.avatar { width: 80px; height: 80px; border-radius: 50%; }
.avatar-uploader-icon { font-size: 32px; color: #8c939d; }
</style> 